<html>
  <head>
      <style type="text/css">
      /*margin and padding on body element
        can introduce errors in determining
        element position and are not recommended;
        we turn them off as a foundation for YUI
        CSS treatments. */
      body {
      	margin:0;
      	padding:0;
      }
      </style>

      <!--
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/treeview.css" />
      <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/cookie/cookie-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>
      -->

      <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />

      <script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
      
      <!-- JSON Source file --> 
      <script type="text/javascript" src="../../build/json/json-min.js"></script>
      <!-- Cookie Source File --> 
      <script type="text/javascript" src="../../build/cookie/cookie-min.js"></script>

      <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>

      <script type="text/javascript">
          // bug #2221151
          // https://sourceforge.net/tracker/index.php?func=detail&aid=2221151&group_id=165715&atid=836476
          // uncomment the function below and it works smashingly
          // (function () {
          //     var oldGetNodeDefinition = YAHOO.widget.Node.prototype.getNodeDefinition;
          //     YAHOO.widget.Node.prototype.getNodeDefinition = function () {
          //     var def = oldGetNodeDefinition.call(this);
          //     if (!this.expanded) {delete def.expanded;}
          //         return def;
          //     };
          // })();
          
            var treeInit = function() {
                console.log('tree initialization'),
                id = 'markup';
                
                var tree, cuky = YAHOO.util.Cookie.get(id);

                if (!cuky) {
                    console.log("Instantiate based on div");
                    tree = new YAHOO.widget.TreeView(id);
                }
                else {
                    console.log("Reinstantiate from cookie\n" + cuky);
                    var tree_struct_s = YAHOO.lang.JSON.parse(cuky);
                    tree = new YAHOO.widget.TreeView(id,tree_struct_s);
                }

                // Save state very time it changes: YAHOO.util.Cookie.set(id, tree.s);
                tree.subscribe("expandComplete", function(node) {
                    var tree_struct_e = tree.getTreeDefinition();
                    var tree_data_string_e = YAHOO.lang.JSON.stringify(tree_struct_e);
                    console.log("expandComplete\n" + tree_data_string_e);
                    YAHOO.util.Cookie.set(id,tree_data_string_e);
                });
                tree.subscribe("collapseComplete", function(node) { 
                    var tree_struct_c = tree.getTreeDefinition();
                    var tree_data_string_c = YAHOO.lang.JSON.stringify(tree_struct_c);
                    console.log("collapseComplete\n" + tree_data_string_c);
                    YAHOO.util.Cookie.set(id,tree_data_string_c);
                });

            	tree.render();
            };

            YAHOO.util.Event.onDOMReady(treeInit);

      </script>
      
  </head>
  <body>
      <div id="markup">
      	<ul>
      		<li>List 0
      			<ul>
      				<li>List 0-0
      					<ul>
      						<li>item 0-0-0</li>
      						<li>item 0-0-1</li>
      					</ul>
      				</li>
      			</ul>
      		</li>
      		<li>item 0-1
      			<ul>
      				<li><a target="_new" href="HTTP://developer.yahoo.com/yui" title="go to YUI Home Page">YUI</a>
      					<ul>
      						<li>item 0-1-0</li>
      						<li>item 0-1-1</li>
      					</ul>
      				</li>
      			</ul>
      		</li>
      	</ul>
      </div>
      
  </body>
</html>
 	  	 
